<template>
    <div class="box">
        <div class="graph-container" v-show="length && pack">
            <div class="name">二维拓扑图</div>
            <div class="divider"></div>
            <div ref="container" id="g6-container"></div>
        </div>
        <div class="pack" @click="handlePack" v-if="length" >
            <img src="@/assets/images/pack.png" />
        </div>

    </div>
</template>
  
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import G6 from '@antv/g6/dist/g6.min.js';
const props = defineProps({
    data: {
        type: Array,
        default: []
    },
    nodeList: {
        type: Array,
        default: []
    }
})
const container = ref(null);
let graph = null;
const length = ref(0);
const pack = ref(true);
onMounted(() => {
    graph = new G6.Graph({
        debug: true,
        container: 'g6-container', // 对应 DOM 的 id
        width: 280,
        height: 280,
        fitView: true,
        minZoom: 0.5,   // 最小缩放比例
        maxZoom: 1.5,     // 最大缩放比例
        // fitViewPadding: 10, // 若开启需设置合理边距
        layout: {
            type: 'dagre',  // 支持左右/上下排列的布局
            rankdir: 'TB', // 垂直方向
            nodesep: 4,    // 节点水平间距
            ranksep: 4,    // 层级垂直间距
            align: 'DL',    // 节点对齐到左下角
            nodeSize: [80, 30]  // 强制节点占位尺寸
        },
        defaultNode: {
            type: 'rect',
            size: [80, 20],
            style: {
                radius: 4 // 圆角矩形
            },
            labelCfg: {
                style: {
                    fontSize: 12,
                    fill: '#333',
                    // textBaseline: 'middle' // 垂直居中
                },
                position: 'center'  // 文本居中
            },
        },
        modes: {
            default: ['drag-canvas', 'zoom-canvas',]
        },
        defaultEdge: { // 全局边默认配置[3](@ref)
            type: 'line',
            style: { stroke: '#fff', endArrow: false }
        },

    });
    setData(props.data,);

});

//更新数据
const setData = (connectionsList,init=true) => {
    graph.clear();
    let edges = [];
    let nodes = [];
    connectionsList.forEach(line => {
        if (line.startId && line.endId) {
            nodes.push({
                anchorPoints: [[0.5, 0.5]], // 设置中心为锚点
                type: 'rect', // 使用自定义节点类型
                id: line.startId,
                label: props.nodeList.find(n => n.id == line.startId).label,

            })
            nodes.push({
                anchorPoints: [[0.5, 0.5]], // 设置中心为锚点
                type: 'rect', // 使用自定义节点类型
                id: line.endId,
                label: props.nodeList.find(n => n.id == line.endId).label,
            })
            edges.push({
                source: line.startId,
                target: line.endId,
                id: line.id,
            })
        }
    })
    length.value = nodes.length;
  //  if(init){
        graph.data({ nodes, edges });
    // }else{
    //     graph.changeData({ nodes, edges });
    // }
    
    graph.render();
}

const handlePack = () => {
    pack.value = !pack.value;
}


onBeforeUnmount(() => {
    graph.destroy();
});
defineExpose({ setData });
</script>
  
<style lang="scss" >

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

.slide-in-right {
    animation: slideInRight 0.5s forwards;
}

.slide-out-right {
    animation: slideOutRight 0.5s forwards;
}

.box {
    position: absolute;
    z-index: 100;
    right: 18px;
    bottom: 20px;
    min-width: 300px;
    height: 320px;
}
.pack {
    position: absolute;
    top: 6px;
    right: 10px;
  
    padding: 4px 6px;
    z-index: 10;
    cursor: pointer;
         border-radius: 4px;
        background: #23446f;
    &:active {
        opacity: 0.8;
    }
    // &:hover {
    //     border-radius: 4px;
    //     background: #23446f;
    // }

    img {
        width: 18px;
        height: 18px;
    }
}
.name {
    margin-left: 10px;
    color: #fff;
    margin-bottom: 10px;
}
.graph-container {
    cursor: pointer;
    // overflow: auto;
    // position: absolute;
    padding: 10px;
    z-index: 100;
    // right: 18px;
    // bottom: 20px;
    height: 320px;
  
    border-radius: 10px;
    background: rgba(0, 17, 46, 0.3);
    backdrop-filter: blur(8px);
}
.divider {
    width: 100%;
    height: 1px;
    background: #516473;
}
</style>